<template>
    <view class="book-list-container">
        <nav-bar :title="title" mode="user"></nav-bar>
        <view class="search-box">
            <u-search
                placeholder="请输入您要搜索的内容"
                :show-action="false"
                v-model="bookListKeyword" @search="getBooksBySearch"
            ></u-search>
        </view>
        <view class="book-list-body">
            <view
                class="book-item"
                v-for="item in bookListData"
                :key="item.id"
                @click="toEditBook(item)"
            >
                <view class="book-item-image">
                    <image :src=" item ? (baseUrlImg + item.books_img) : '../static/book-title-item.png'" mode="" />
                </view>
                <view class="book-item-top">
                    <view class="book-item-title">{{ item.title }}</view>
                    <view class="book-item-tags">
                        <view
                            class="book-item-tag"
                            v-for="(tag, tagIndex) in JSON.parse(item.books_status)"
                            :key="tagIndex"
                            :class="[
                                { 'book-item-tag-new': tag == 1 },
                                { 'book-item-tag-free': tag == 2 },
                                { 'book-item-tag-hot': tag == 3 },
                            ]"
                            >{{ tagNames[tag - 1] }}</view
                        >
                    </view>
                </view>
                <view class="book-item-types">
                    <view
                        class="book-item-type"
                        v-for="(type, typeIndex) in item.books_keywords"
                        :key="typeIndex"
                    >
                        {{ type }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        this.baseUrl = "http://cartoon-books-admin.v2.ascetic.top/";
        this.baseUrlImg = "http://cartoon-books-go.oss-cn-shanghai.aliyuncs.com/";
        return {
            id: "",
            title: "",
            bookListKeyword: "",
            page: 0,
            num: 10,
            bookListData: [],
            tagNames: ["新", "免", "热"],
        };
    },
    methods: {
        toEditBook(item) {
            uni.navigateTo({
                url: `/pages/editBook?id=${item.id}`,
            });
        },
		getBooksBySearch() {
			let o = {};
			this.getBookList()
		},
        getBookList() {
            let o = {};
            o.classification_id = this.id;
            
            // o.books_keywords = this.bookListKeyword;
            o.page = this.page;
            o.num = this.num;
			if (this.bookListKeyword) {
				o.title = this.bookListKeyword;
			}
            this.$u.post("books_list", o).then((res) => {
                this.bookListData = res.data;
            });
        },
    },
    onLoad(e) {
        this.title = e.title;
        this.id = e.id;
        this.getBookList();
    },
};
</script>

<style scoped>
page {
    background-color: #fff;
}
.search-box {
    width: 100%;
    padding: 40rpx;
    /* padding-top: 80rpx; */
    background-color: rgb(51, 204, 0);
}
.book-list-body {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.book-item {
    width: 48%;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx #ccc;
    margin-top: 40rpx;
}
.book-item-image {
    width: 100%;
    height: 400rpx;
}
.book-item-image image {
    width: 100%;
    height: 400rpx;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}
.book-item-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-weight: bold;
}
.book-item-tags {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.book-item-tag {
    margin-left: 10rpx;
    color: #fff;
    font-size: 24rpx;
    border-radius: 10rpx;
    padding: 4rpx;
}
.book-item-tag-hot {
    background-color: rgb(243, 90, 68);
}
.book-item-tag-new {
    background-color: rgb(45, 190, 238);
}
.book-item-tag-free {
    background-color: rgb(137, 255, 122);
}
.book-item-types {
    display: flex;
    align-items: center;
    padding: 0rpx 20rpx;
    margin-bottom: 20rpx;
    flex-wrap: wrap;
}
.book-item-type {
    margin-right: 10rpx;
}
</style>
